import React,{ lazy } from 'react'
import HomeDemo from '../views/Home'
const AboutDemo = lazy(()=>import('../views/About'))
const Page1 = lazy(()=>import('../views/Page1'))
const Page2 = lazy(()=>import('../views/Page2'))

import { Navigate } from 'react-router-dom'

const withLoadingComponent = (comp:JSX.Element) => (
  <React.Suspense fallback={<div>Loading....</div>}>
    { comp }
  </React.Suspense>
)

const routes = [
  {
    path: '/',
    element: <Navigate to="/page1" />
  },
  {
    path: '/',
    element: <HomeDemo></HomeDemo>,
    children: [
      {
        path: '/page1',
        element: withLoadingComponent(<Page1 />)
      },
      {
        path: '/page2',
        element: withLoadingComponent(<Page2 />)
      }
    ]
  },
  {
    path: '/about',
    element: withLoadingComponent(<AboutDemo />)
  }
]
export default routes